import React from 'react';
import ReactDom from 'react-dom';
import './bag.scss';
import { api } from 'js/api/base';

class Bag extends React.Component {
    constructor() {
        super()
        this.state = {
            bag: null
        }
    }
    componentDidMount() {
        api('getBag', (err, data) => {
            console.log(data)
            this.setState({ bag: data })
        })
    }
    render() {
        let { bag } = this.state;
        let node = [];
        let propName = window.propName;
        if (bag) {
            node = bag.items.map((item, i) => {
                if (item) {
                    return <div className="item flex-center" key={i}>{propName[item.templateId]}</div>
                } else {
                    return <div className="item" key={i}></div>
                }

            })
        }
        return <div id="bag">
            <div className="bag flex wrap jc-around">
                {node}
            </div>
        </div>
    }
}

export default Bag;